$fontSize: 12px;
$padding: 8px;
$itemPaddingX: 14px;
$scriptIconSize: 18px;
$scriptIconMLR: 2px;
$iconSize: 14px;
$iconML: calc($scriptIconSize + 2 * $scriptIconMLR);
$iconMR: 10px;
$leftPaneWidth: calc($iconML + $iconSize + $iconMR);
$logoSize: 32px;
$logoMLR: calc(($leftPaneWidth - $logoSize) / 2);
$topIconSize: 20px;
$findIconSize: 16px;
$findIconML: calc($leftPaneWidth - $findIconSize - $iconMR);
$footerHeight: 40px;

$hoverColor: var(--bg);
$hoverBack: cornflowerblue;
$hoverButtonInactiveBack: #a0c1fd;
$DARKhoverColor: var(--fill-15);
$DARKhoverBack: #404c5c;
$DARKhoverButtonInactiveBack: #5b6979;

html {
  scrollbar-width: none; /* Vivaldi: preventing the full-body scrollbar before size-adjustment kicks in */
}
body {
  width: 320px;
  max-width: 100%;
  /* Latest Chrome renders an extra blank for a nonexistent scrollbar */
  overflow: hidden;
  background: var(--fill-0-5);
  font-weight: normal;
  @media (min-width: 360px) {
    width: 100%;
  }
}

a {
  &,
  &:focus {
    color: inherit;
  }
}

.page-popup {
  overflow: hidden;
  .incognito {
    padding: $padding $padding 0 $leftPaneWidth;
  }
}

footer {
  height: $footerHeight;
  line-height: $footerHeight;
  text-align: center;
  font-size: $fontSize;
  color: var(--fill-6);
  a:not([href]) {
    color: var(--fg);
    font-weight: bold;
  }
}

.logo {
  text-align: center;
  margin: 0 $logoMLR;
  img {
    width: $logoSize;
    [data-is-applied="false"] & {
      opacity: .5;
    }
  }
}

.menu-area {
  cursor: pointer;
  &:hover,
  &:focus {
    background: $hoverBack;
    color: $hoverColor;
    @media (prefers-color-scheme: dark) {
      background: $DARKhoverBack;
      color: $DARKhoverColor;
    }
  }
  .script:not(.disabled):not(.runs) & .script-name,
  .disabled:not(.runs) > & {
    opacity: .65;
    &:hover,
    &:focus {
      opacity: 1;
    }
  }
}

[data-is-applied="false"] .ext-name {
  color: var(--fill-8);
}

.script-icon {
  &:not([src]) {
    display: none;
  }
  max-width: $scriptIconSize;
  max-height: $scriptIconSize;
  margin-left: $scriptIconMLR;
  position: absolute;
  & + .icon {
    margin-left: $iconML;
    margin-right: $iconMR;
  }
}

.script-name {
  /* expand right-click-to-edit area */
  flex: 1;
  align-self: stretch;
  align-items: center;
  display: flex;
  .tardy {
    margin-left: .5rem;
    color: red;
    .icon {
      width: 16px;
      height: 16px;
      vertical-align: text-bottom;
    }
  }
}

.menu-buttons {
  align-items: center;
  padding: $padding $padding $padding 0;
  background: var(--bg);
  > .menu-area {
    padding: $padding calc($padding * .75);
    &:last-child { /* vertical "..." */
      margin: 0 calc($padding * -.5);
    }
  }
  .icon {
    display: block;
    width: $topIconSize;
    height: $topIconSize;
  }
}

.menu {
  background: var(--bg);
  &, &:not(.expand) + footer {
    border-top: 1px solid var(--fill-4);
  }
  &-item {
    position: relative;
    display: flex;
    flex-wrap: wrap; /* the update notice must go to the next row */
    align-items: center;
    min-height: 2rem;
    padding-left: $itemPaddingX;
    padding-right: $itemPaddingX;
    text-align: left;
    .submenu & {
      text-align: left;
    }
    .icon {
      flex: 0 0 $iconSize;
      &.icon-collapse {
        flex: 0 0 $findIconSize;
        width: $findIconSize;
        height: $findIconSize;
      }
    }
    > .icon:first-child {
      margin-right: $iconMR;
    }
    > .flex-auto {
      display: flex;
      align-self: stretch;
      align-items: center;
      &:last-child {
        padding-right: $itemPaddingX;
      }
    }
    > .flex-1 {
      padding-right: 2rem;
    }
    .failed & {
      text-decoration: line-through red;
    }
    .removed & {
      text-decoration: line-through;
    }
  }
  &-find {
    padding-left: 0;
    cursor: default;
    a {
      display: flex;
      align-items: center;
      align-self: stretch;
    }
    .icon {
      flex-basis: $findIconSize;
      width: $findIconSize;
      height: $findIconSize;
      margin: 0 $iconMR 0 $findIconML;
    }
  }
  &-group {
    padding-left: $findIconML;
    color: #4a7792;
    @media (prefers-color-scheme: dark) {
      color: #eee;
    }
    & [data-totals]::after {
      content: ": " attr(data-totals);
    }
  }
  &.expand {
    overflow-y: auto;
    > .submenu {
      display: block;
      border-color: var(--fill-4);
    }
    .icon-collapse {
      transform: rotate(90deg);
    }
    > .menu-group {
      font-weight: bold;
    }
  }
}

.submenu {
  display: none;
  min-height: 2rem;
  overflow-y: auto;
  background: var(--bg);
  border-top: 1px dashed var(--fill-3);
  > * {
    position: relative;
    .menu-item {
      padding-left: 0;
    }
  }
  &-buttons {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    .touch & {
      display: flex !important;
    }
  }
  &-button {
    padding: .5rem;
    background: var(--bg);
    cursor: pointer;
    &:focus {
      color: var(--bg);
      background: $hoverBack;
    }
    .menu-item:hover + .submenu-buttons &:not(:focus) {
      background: $hoverButtonInactiveBack;
      @media (prefers-color-scheme: dark) {
        background: $DARKhoverButtonInactiveBack;
      }
    }
    .icon {
      display: block;
    }
  }
  &-commands {
    font-size: .8rem;
    color: var(--fill-12);
    > .menu-item {
      min-height: 1.5rem;
      padding-left: $leftPaneWidth;
      > .icon {
        margin-right: .5rem;
      }
    }
  }
}

.message {
  position: absolute;
  max-width: 100%;
  left: 0;
  bottom: 0;
  padding: 4px $padding;
  word-wrap: break-word;
  font-size: $fontSize;
  line-height: 1.2; /* lower values cut descender in "g" */
  background: var(--fill-0-5);
  border: 1px solid var(--fill-2);
  max-height: $footerHeight;
  overflow: hidden;
  white-space: pre-wrap;
}

.failure-reason {
  padding: .5rem $itemPaddingX .5rem $leftPaneWidth;
  code {
    max-width: 100%;
  }
  &.note {
    font-size: smaller;
    padding-left: $iconML;
    hyphens: auto;
  }
}

.page-popup:not(.noninjectable):not(.blacklisted) {
  .failure-reason {
    // Making the warning noticeable
    background: hsla(30, 100%, 50%, .2);
  }
  .settings {
    background: none;
  }
}

.extras-menu {
  position: fixed;
  right: 1rem;
  max-width: 75vw;
  box-shadow: 1px 1px 10px #0008;
  z-index: 100;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fill-6);
  & > * {
    cursor: pointer;
    display: block;
    padding: .25rem 1rem;
    text-decoration: none;
    &:first-child {
      padding-top: .75rem;
    }
    &:last-child {
      padding-bottom: .75rem;
    }
    &:focus {
      color: var(--bg);
      background: cornflowerblue;
    }
  }
}

.excludes-menu {
  padding: .25rem .5rem .25rem $leftPaneWidth;
  button {
    text-align: left;
    max-width: 100%;
  }
  input {
    width: 100%;
  }
  details {
    summary {
      list-style-type: none;
    }
    &[open] {
      padding-top: .25rem;
      summary {
        position: absolute;
        left: calc($leftPaneWidth - $scriptIconSize - $iconMR);
      }
    }
    &:not([open]) {
      display: inline;
    }
  }
  .icon {
    cursor: pointer;
    width: $scriptIconSize;
    height: $scriptIconSize;
  }
}

.extras-shown .script-name {
  text-decoration: underline;
}

.block-scroll {
  pointer-events: none;
  user-select: none;
}

.upd[title] {
  width: 100%;
  padding-left: $leftPaneWidth;
  font-size: 10px;
  margin-top: -4px;
  line-height: 1;
  color: goldenrod;
  &[data-error] {
    color: red;
  }
  &::after {
    content: attr(title);
  }
}

.settings {
  padding: 1em;
  overflow-y: auto;
}

.syntax {
  font-size: xx-small;
  position: absolute;
  top: -0.2em;
  color: red;
}
